<?php
use yii\helpers\Html;
use yii\helpers\Url;
$this->title = '个人头像';
?>

<style type="text/css">
.demo{width:620px; margin:30px auto}
.demo p{line-height:32px}
.btn input {position: absolute;top: 18px; right: 30px;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
.progress1 { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none; top: 60px;left: -100px;}
.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
.percent1 { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
.files{height:22px; line-height:22px; margin:10px 0}
.delimg{margin-left:20px; color:#090; cursor:pointer}
</style>

<?php echo $this->render('_centerHeader') ?>
<!--主体开始-->

<div class="main-area" style=" background: #f5f5f5;">
    <div class="container">
        <div class="column-layout">
            <!-- main-area-left start  -->
<div class="column-col column-full main-area-left">
<div class="main-area-leftin tab-box">
<div class="ibox">
    <div class="ibox-in">
        <div class="ibox-head">
            <ul class="tab-list" role="tablist">
                <li role="presentation" class="active">
                    <a href="#BASIC_DOC" aria-controls="BASIC_DOC" role="tab" data-toggle="tab">个人头像</a>
                </li>
            </ul>
        </div>
        <div class="ibox-body tab-pane-list set-form-box">
            <!-- 个人头像  -->
            <div role="tabpanel" class="tab-pane active" id="BASIC_DOC">
              <form class="form-horizontal uc-form" id="user_info_save" role="form" method="post" action="/user/info/save/">

                  <div class="form-group">
                    <label for="" class="col-xs-2 col-sm-2 control-label v5-hd-lable v5-gutter">头像</label>
                    <div class="column-col-m column-full">
                        <span id="photo0" class="u-photo-box u-photo">
                            <div id="showimg">
                                <img src="http://files.bwphp.com/file/image/show/100/100?path=<?php echo $model->user_thumb?>" alt="" width='150' height='90'>
                                
                            </div>
                        </span>
                        <span class="u-photo-tip">支持jpg、gif、png或bmp格式的图片，建议文件小于1M
				            <div class="btn">
						        <span>修改头像</span>
						        <input id="fileupload" type="file" name="filedata" value="">
					        </div>
                            <div class="progress1">
                                <span class="bar"></span>
                                <span class="percent">0%</span >
                            </div>
					
					        <div class="files"></div>
				        </span>
                    </div>
                </div>

                
                 
                
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-2 v5-gutter">
                    </div>
                    <input id="default_p_c" value="_" type="hidden">
                    <input name="uid" value="73826" type="hidden">
                  </div>
                  <div class="form-group"><div id="msg" class="tips-error bg-warning"></div></div>
                </form> 			
            </div>
        </div>
    </div>
</div>
</div>
</div>
            <!-- main-area-left end  -->
            <!-- main-area-right start  -->
            <div dy-v="00-00-11-11" class="column-col main-area-right">
                
                <!-- 课程推荐 -->
                <?php echo $this->render('../common/_courseRecommend') ?>
 
                <!-- 名师推荐 -->
                <?php echo $this->render('../common/_teacherRecommend') ?>

                <!-- 图片广告 -->
                <?php echo  $this->render('../common/_adRecommend') ?>
            </div>
            <!-- main-area-right end  -->
        </div>
    </div>
</div>

<script type="text/javascript" src="/assets/jquery.min.js"></script>
<script type="text/javascript" src="/assets/jquery.form.js"></script>


<script type="text/javascript">

var $j = jQuery.noConflict(); 
  //var $ = jQuery; 
$j(function () {
	var bar = $j('.bar');
	var percent = $j('.percent');
	var showimg = $j('#showimg');
	var progress = $j(".progress1");
	var files = $j(".files");
	var btn = $j(".btn span");

    $j("#fileupload").wrap("<form id='myupload' action='http://files.bwphp.com/file/image/upload/userthumb' method='post' enctype='multipart/form-data'></form>");
	
	$j("#fileupload").change(function(){
		$j("#myupload").ajaxSubmit({
			dataType:  'json',
			beforeSend: function() {
        		//showimg.empty();
				progress.show();
        		var percentVal = '0%';
        		bar.width(percentVal);
        		percent.html(percentVal);
				btn.html("修改中...");
    		},
            
    		uploadProgress: function(event, position, total, percentComplete) {
                console.log(123);
        		var percentVal = percentComplete + '%';
        		bar.width(percentVal);
        		percent.html(percentVal);
    		},
			success: function(info) {
				if (info.code == 200)
				{
					files.html("<b>"+info.data.name+"("+info.data.size+"k)</b> ");
					//var img = "http://files.bwphp.com/"+info.data.path;
					var img = "http://files.bwphp.com/file/image/show/150/150?path="+info.data.path;
					showimg.html("<img src='"+img+"' width='150' height='80'>");
					btn.html("更改头像");
					$j('#teacherinfo-teacher_thumb').val(info.data.path);
                    $j('#photo1 > img').attr({'src':img})

                    var uid = "<?php echo $model->user_id;?>";
                    $.ajax({
                       type: "POST",
                       url: "<?= Url::to(['center/savethumb'])?>",
                       data: "user_id="+uid+"&user_thumb="+info.data.path,
                       success: function(msg){
                         if(msg == 1){

                         }else if(msg == 2){
                            alert('数据库修改失败')		
                         }
                       }
                    });
				} 
				else if (info.code == 400)
				{
					btn.html("上传失败");
					bar.width('0')
					files.html(info.msg);
				} 
					
			},
			error:function(xhr){
				btn.html("上传失败");
				bar.width('0')
				files.html(xhr.responseText);
			}
		});
	});
});

</script>